<!--
 * @Descripttion: 
 * @Author: liZhaoBo
 * @Date: 2024-04-29 10:11:49
 * @LastEditors: liZhaoBo
 * @LastEditTime: 2024-05-06 10:46:21
-->
<template>
  <div class="base-component">
    <!-- 批量导入 -->
    <div class="baserow">
      <span>批量导入</span>
      <batch-import :cols="cols"></batch-import>
    </div>
    <a-divider />
    <!-- 字典选择框 -->
    <div class="baserow">
      <span>字典选择框</span>
      <dict-select
        v-model="form.test"
        style="width: 200px"
        allow-clear
        dict-type="loginReultType"
        placeholder="请选择"
      ></dict-select>
    </div>
    <a-divider />

    <!-- 关注工作 -->
    <div class="baserow">
      <span>关注工作</span>
      <focus-on-work-btn :params="{ id: '1111' }"></focus-on-work-btn>
    </div>
    <a-divider />

    <!-- 提交审批 -->
    <div class="baserow">
      <span>提交审批</span>
      <submit-approval-page
        title="流程提交"
        btn-title="提交流程"
        :params="{ id: '1111' }"
      ></submit-approval-page>
    </div>
    <a-divider />
    <div class="baserow">
      <span>选择人员</span>
      <userSelect v-model:visible="visible" :title="'申请人'" />
      <a-button type="primary" @click="selectUser">选择人员</a-button>
    </div>
    <a-divider />
    <div class="baserow">
      <span style="width: 320px">筛选框-弹出筛选-表格选择</span>
      <searchItem
        v-model:value="value"
        :name="'name'"
        :table-obj="tableObj"
        :title="'类别'"
      />
    </div>
    <div class="baserow">
      <span style="width: 300px">筛选框-弹出筛选-选择人员</span>
      <searchItemUser
        v-model:value="value"
        :title="'申请人'"
        @hander-clear="handerClear"
      />
    </div>
  </div>
</template>

<!--新script-->
<script lang="ts" setup>
  import batchImport from '@/common/components/batch-import/index.vue';
  import dictSelect from '@/common/components/dict-select/index.vue';
  import focusOnWorkBtn from '@/common/components/focus-on-work-btn/index.vue';
  import submitApprovalPage from '@/common/components/submit-approval-page/index.vue';
  import userSelect from '@/common/components/userAndDept/userModal.vue';
  import searchItem from '@/common/components/search-modal/index.vue';
  import { ref, watch, reactive } from 'vue';
  import searchItemUser from '@/common/components/search-modal/user.vue';

  const form = ref({
    test: '',
  });
  const cols = ref([
    {
      title: '姓名',
      dataIndex: 'name',
      slotName: 'name',
    },
    {
      title: '年龄',
      dataIndex: 'age',
      slotName: 'age',
    },
  ]);
  // 筛选框-列表参数
  const tableObj = reactive({
    api: '/api/',
    renderConfig: {
      name: {
        label: '名称',
        field: 'name',
        componentName: 'input',
      },
      sex: {
        label: '性别',
        field: 'sex',
        componentName: 'select',
        componentProps: {
          options: [
            { label: '男', value: 1 },
            { label: '女', value: 2 },
          ],
        },
      },
      age: {
        label: '年龄',
        field: 'age',
        componentName: 'inputNumber',
      },
      birthday: {
        label: '生日',
        field: 'birthday',
        componentName: 'timePicker',
        componentProps: {
          format: 'YYYY-MM-DD',
        },
      },
    },
    renderKeys: ['name', 'sex', 'age', 'birthday'],
    columns: [
      {
        title: 'Name',
        dataIndex: 'name',
      },
      {
        title: 'Salary',
        dataIndex: 'salary',
      },
      {
        title: 'Address',
        dataIndex: 'address',
      },
      {
        title: 'Email',
        dataIndex: 'email',
      },
    ],
  });
  watch(
    () => form.value,
    () => {
      console.log('form.value', form.value);
    },
    { deep: true, immediate: true }
  );
  // 筛选弹出清除
  const handerClear = () => {
    console.log('ssss');
  };
  const visible = ref(false);
  const value = ref('');
  const selectUser = () => {
    visible.value = true;
  };
</script>

<style lang="less" scoped>
  .base-component {
    height: calc(100% - 48px);
    padding: 24px;
    background: #fff;

    .baserow {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 400px;
      height: 50px;
    }
  }
</style>
